<template>
	<view class="page-wrapper history" :data-theme="theme">
		<view class="history_count">
			<block v-if="list.length>0">
				<view class="history_header acea-row">
					<text>共{{total}}条</text>
				</view>
				<view class="list" v-for="(item,index) in list" :key="index">
					<shop-area v-if="(item.type==1 || item.type == 8) &&item.managementResponse" :list="[item.managementResponse]" :isTozx="false"></shop-area>
					<goldItem v-if="item.type==2 && item.managementResponse" :list="[item.managementResponse]"></goldItem>
					<merService v-if="item.type==3 && item.managementResponse" :list="[item.managementResponse]" :toZx="false"></merService>
					<sypplyService v-if="item.type==4 && item.managementResponse" :list="[item.managementResponse]" :toZx="false"> </sypplyService>
					<recruit v-if="item.type==5 && item.managementResponse" :isIndex="true" :list="[item.managementResponse]"></recruit>
					<project-list v-if="item.type==9 && item.managementResponse" :list="[item.managementResponse]" />
					<askSupply v-if="item.type==11 && item.managementResponse" :list="[item.managementResponse]" :isMatch="true" />
				</view>
			</block>
			<block v-if="(list.length==0 && !loading ) ">
				<emptyPage title="暂无浏览记录~"></emptyPage>
			</block>
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
			</view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import shopArea from '@/components/listItems/shopArea.vue'
	import goldItem from '@/components/listItems/goldItem.vue'
	import merService from '@/components/listItems/merService.vue'
	import recruit from '@/components/listItems/recruit.vue'
	import sypplyService from '@/components/listItems/sypplyService.vue'
	import projectList from '@/components/listItems/projectList.vue'
	import emptyPage from '@/components/emptyPage.vue'
		import askSupply from '@/components/listItems/askSupply.vue'
	import {
		browseRecordApi,
		historyDelete,
		historyBatchDelete,
		historyBatchCollect,
		getVisitRecord
	} from '@/api/user.js'
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	let app = getApp();
	export default {
		components: {
			emptyPage,
			easyLoadimage,
			shopArea,
			goldItem,
			merService,
			recruit,
			sypplyService,
			projectList,
			askSupply
		},
		computed: mapGetters(['uid', 'globalData']),
		data() {
			return {
				list: [],
				allArr: [],
				total: 0,
				theme: app.globalData.theme,
				loading: true,
				limit: 8,
				page: 1
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				if (this.page == 1) {
					this.list = [];
				}
				getVisitRecord({
					limit: this.limit,
					page: this.page
				}).then(({
					data
				}) => {
					console.log(data)
					// this.list = data;
					//    data.map(item => {
					// 	this.total += item.list.length;
					// 	item.date = item.date.slice(5, 7)+'月'+item.date.slice(8, 10)+'日' ;
					// })
					this.total = data.total
					if (this.page == 1) {
						this.list = data.list;
						if (this.list.length <= 0) {
							this.loadTitle = '暂无数据'
						}
					} else {
						this.list = this.list.concat(data.list);
						if (res.data.list.length <= 0) {
							this.loadTitle = '已加载所有'
						}
					}
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					return this.$util.Tips({
						title: err
					});
				});
			},
			goPage(item) {
				this.page++;
				this.getList();
				goShopDetail(item.productId);
			}
		},
		// 滚动监听
		onReachBottom() {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
			this.page++;
			this.getList();
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.history {
		margin-bottom: 96rpx;

		.history_count {
			padding: 0 30rpx;
		}

		.history_header {
			justify-content: space-between;
			margin: 30rpx 0;

			text {
				font-size: 26rpx;
				color: #666666;
			}

			.text {
				color: var(--view-theme);
			}
		}

		.list {
			margin-top: 20rpx;

			.item_time {
				font-size: 36rpx;
				color: #282828;
				font-weight: bold;
				display: flex;
				align-items: center;
			}

			.item_main {
				margin-top: 30rpx;
			}
		}

		.item {
			width: 100%;
			border-radius: 16rpx;
			margin: 0 20rpx 20rpx 0;
			position: relative;

			&:nth-child(3n) {
				margin-right: 0;
			}

			/deep/image,
			/deep/.easy-loadimage,
			uni-image {
				width: 217rpx;
				height: 217rpx;
				border-radius: 16rpx;
			}

			.info {
				margin-top: 20rpx;
				color: var(--view-priceColor);
				font-size: 24rpx;
			}
		}
	}

	/deep/.loadfail-img,
	.easy-img {
		width: 217rpx;
		height: 217rpx;
		border-radius: 16rpx;
		display: block;
	}

	.item_time .checkbox .iconfont {
		font-size: 38rpx;
		color: #999999;
		margin-right: 10rpx;

		&.icon-xuanzhong1 {
			color: var(--view-theme);
		}
	}

	.item_main .checkbox .iconfont {
		font-size: 40rpx;
		color: #DEDEDE;
		position: absolute;
		right: 12rpx;
		top: 12rpx;
		z-index: 10;
		border-radius: 100%;

		&.icon-weixuanzhong {
			&::after {
				content: "";
				display: block;
				width: 36rpx;
				height: 36rpx;
				background: rgba(0, 0, 0, .38);
				position: absolute;
				top: 2rpx;
				left: 2rpx;
				border-radius: 100%;
				border: 1rpx solid #DEDEDE;
			}
		}
	}

	.history .item .icon-xuanzhong1 {
		color: var(--view-theme);
	}

	.history .footer {
		z-index: 99;
		width: 100%;
		height: 96rpx;
		background-color: #ffffff;
		position: fixed;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
		bottom: var(--window-bottom);
	}

	.area-edit {
		justify-content: center;

		.area-item {
			width: 50%;
			text-align: center;
			position: relative;
			align-items: center;
			color: #333333;

			.text {
				position: relative;
				top: -1px;
			}

			.iconfont {
				color: #333333;
			}

			&:nth-child(1) {
				&::after {
					content: '';
					display: inline-block;
					width: 2rpx;
					height: 42rpx;
					background: #CCCCCC;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
	}

	.history .footer .checkAll {
		font-size: 28rpx;
		color: #282828;
		margin-left: 16rpx;
	}

	.allcheckbox .iconfont {
		margin-right: 11px;
		font-size: 40rpx;
		color: #cccccc;
	}

	.allcheckbox .icon-xuanzhong1 {
		color: var(--view-theme);
	}

	.history .footer .button .bnt {
		font-size: 28rpx;
		color: #999;
		border-radius: 50rpx;
		border: 1px solid #999;
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;

		&.collect_btn {
			color: var(--view-theme);
			border-color: var(--view-theme);
		}
	}

	.empty-box {
		margin-top: 60%;
	}
</style>